<template>
   <!-- 加载图标样式3 -->
   <div class="loading"></div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.loading {
    animation: ball-rotate 1s cubic-bezier(.7,-.13,.22,.86) 0s infinite;
    animation-fill-mode: both;
    background-color: #ea4e3d;
    border-radius: 100%;
    height: 15px;
    margin: 20px;
    position: relative;
    width: 15px
}

.loading:after,.loading:before {
    border-radius: 100%;
    content: "";
    height: 15px;
    margin: 2px;
    opacity: .8;
    position: absolute;
    width: 15px
}

.loading:before {
    background-color: #1678ff;
    left: -28px;
    top: 0
}

.loading:after {
    background-color: #ffaa09;
    left: 25px;
    top: 0
}

@keyframes ball-rotate {
    0% {
        transform: rotate(0deg) scale(1)
    }

    50% {
        transform: rotate(180deg) scale(.6)
    }

    to {
        transform: rotate(1turn) scale(1)
    }
}
</style>
